<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信小程序 + FastAdmin 协作流程</title>
  <style>
    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Arial', sans-serif;
      background: #f7f9fb;
      margin: 0;
      padding: 0;
      color: #222;
    }
    .main-layout {
      display: flex;
      min-height: 100vh;
    }
    .sidebar {
      width: 220px;
      background: #2d8cf0;
      color: #fff;
      padding-top: 40px;
      box-shadow: 2px 0 12px rgba(45,140,240,0.08);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 10;
    }
    .sidebar h2 {
      color: #fff;
      font-size: 1.1em;
      text-align: center;
      margin-bottom: 32px;
      letter-spacing: 2px;
    }
    .nav-step {
      padding: 18px 32px 18px 32px;
      cursor: pointer;
      border-left: 4px solid transparent;
      transition: background 0.2s, border-color 0.2s;
      font-size: 1.08em;
    }
    .nav-step.active, .nav-step:hover {
      background: #fff;
      color: #2d8cf0;
      border-left: 4px solid #2d8cf0;
      font-weight: bold;
    }
    .content-area {
      margin-left: 220px;
      flex: 1;
      padding: 48px 32px 32px 32px;
      background: #f7f9fb;
      min-height: 100vh;
    }
    .content-title {
      font-size: 1.6em;
      color: #2d8cf0;
      margin-bottom: 12px;
      font-weight: bold;
    }
    .content-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      padding: 32px 28px 24px 28px;
      margin-bottom: 32px;
      min-height: 320px;
      transition: box-shadow 0.2s;
    }
    .role-box {
      display: flex;
      gap: 24px;
      margin-bottom: 8px;
    }
    .role {
      flex: 1;
      background: #f0f6ff;
      border-radius: 8px;
      padding: 16px;
      box-sizing: border-box;
      border-left: 4px solid #2d8cf0;
    }
    .role-title {
      font-weight: bold;
      color: #2d8cf0;
      margin-bottom: 6px;
    }
    .prompt-flow {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }
    .prompt-card {
      background: #f0f6ff;
      border-left: 4px solid #2d8cf0;
      border-radius: 8px;
      padding: 18px 20px;
      min-width: 220px;
      max-width: 260px;
      flex: 1 1 220px;
      box-sizing: border-box;
      margin: 0;
      position: relative;
      text-align: left;
      margin-bottom: 18px;
      box-shadow: 0 2px 8px rgba(45,140,240,0.06);
      font-size: 1em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    .prompt-desc {
      color: #2d8cf0;
      font-size: 0.98em;
      display: block;
      margin-top: 6px;
    }
    .arrow-right {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-width: 48px;
      min-height: 48px;
      margin: 0 0px 0 0px;
    }
    .arrow-svg {
      display: block;
      margin: auto;
      width: 38px;
      height: 38px;
    }
    @media (max-width: 1200px) {
      .prompt-flow {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
      }
      .arrow-right {
        transform: rotate(90deg);
        min-width: 32px;
        min-height: 32px;
      }
      .arrow-svg {
        width: 28px;
        height: 28px;
      }
    }
    @media (max-width: 700px) {
      .prompt-card { min-width: 90vw; max-width: 98vw; }
      .arrow-right { min-width: 18px; min-height: 18px; }
      .arrow-svg { width: 18px; height: 18px; }
    }
    @media (max-width: 900px) {
      .main-layout { flex-direction: column; }
      .sidebar { position: static; width: 100%; flex-direction: row; height: auto; box-shadow: none; padding-top: 0; }
      .nav-step { padding: 14px 10px; font-size: 1em; border-left: none; border-bottom: 2px solid transparent; }
      .nav-step.active, .nav-step:hover { border-left: none; border-bottom: 2px solid #2d8cf0; }
      .content-area { margin-left: 0; padding: 18px 6px; }
    }
  </style>
</head>
<body>
  <div class="main-layout">
    <nav class="sidebar">
      <h2>WxApp-AI协作流程</h2>
      <div class="nav-step active" onclick="showStep(0)">1. 项目需求梳理</div>
      <div class="nav-step" onclick="showStep(1)">2. 技术选型与环境搭建</div>
      <div class="nav-step" onclick="showStep(2)">3. 数据库设计</div>
      <div class="nav-step" onclick="showStep(3)">4. 接口设计</div>
      <div class="nav-step" onclick="showStep(4)">5. 小程序页面与功能开发</div>
      <div class="nav-step" onclick="showStep(5)">6. 后端接口开发</div>
      <div class="nav-step" onclick="showStep(6)">7. 联调与测试</div>
      <div class="nav-step" onclick="showStep(7)">8. 上线与维护</div>
    </nav>
    <div class="content-area">
      <div id="step-content-0" class="content-section">
        <div class="content-title">1. 项目需求梳理</div>
        <div class="prompt-flow">
          <div class="prompt-card">
            <strong>请简要描述你的小程序要解决的核心问题或痛点</strong><br>
            <span class="prompt-desc">例如：二手物品流通不畅、社区沟通不便等</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>请列出你希望小程序具备的主要功能</strong><br>
            <span class="prompt-desc">例如：商品发布、商品浏览、在线支付、评论互动、消息通知等</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>目标用户是谁？他们的年龄、职业、兴趣、使用场景？</strong><br>
            <span class="prompt-desc">例如：大学生、上班族、宝妈等</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>你期望的小程序界面风格和品牌色调？</strong><br>
            <span class="prompt-desc">例如：极简、科技蓝、温馨橙色等</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>是否有竞品或参考小程序？请提供名称或截图</strong><br>
            <span class="prompt-desc">例如：转转、闲鱼等</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>是否有特殊的业务流程或用户操作流程？</strong><br>
            <span class="prompt-desc">例如：下单-支付-发货-收货-评价</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>是否需要集成第三方服务？</strong><br>
            <span class="prompt-desc">例如：微信支付、地图定位、短信验证、第三方登录</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>你是否已有后端（如FastAdmin）或需要全新搭建？</strong><br>
            <span class="prompt-desc">例如：已有部分数据/需要全新开发</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>你期望的开发周期和上线时间？</strong><br>
            <span class="prompt-desc">例如：1个月内上线</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>预算范围和团队协作方式？</strong><br>
            <span class="prompt-desc">例如：预算2万，需多人协作/单人开发</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>你对数据安全、用户隐私有无特殊要求？</strong><br>
            <span class="prompt-desc">例如：实名认证、数据加密、合规要求</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>其他补充说明或个性化需求</strong><br>
            <span class="prompt-desc">例如：后期可扩展性、支持多语言、支持小程序分享等</span>
          </div>
          <div class="arrow-right">
            <svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/>
              <polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="prompt-card">
            <strong>导出成md需求文档</strong><br>
            <span class="prompt-desc">将梳理好的需求导出为Markdown格式的文档</span>
          </div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的需求，让AI协助你高效梳理项目。</div>
      </div>
      <div id="step-content-1" class="content-section" style="display:none;">
        <div class="content-title">2. 技术选型与环境搭建</div>
        <div class="prompt-flow">
          <div class="prompt-card"><strong>你的操作系统和开发环境</strong><br><span class="prompt-desc">如Windows/Mac/Linux，微信开发者工具版本等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否有服务器或云主机资源</strong><br><span class="prompt-desc">需不需要远程部署</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>你对前端开发框架的偏好</strong><br><span class="prompt-desc">如原生/uni-app/taro等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>你对后端开发语言/框架的要求</strong><br><span class="prompt-desc">如PHP版本、FastAdmin等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否需要代码托管</strong><br><span class="prompt-desc">如GitHub、Gitee等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否有CI/CD自动化部署需求</strong><br><span class="prompt-desc">如自动化测试、自动上线等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>需要哪些开发/测试工具</strong><br><span class="prompt-desc">如Postman、数据库管理工具等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>其它环境搭建相关的特殊要求</strong><br><span class="prompt-desc">如内网穿透、VPN等</span></div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的需求，让AI协助你高效梳理项目环境。</div>
      </div>
      <div id="step-content-2" class="content-section" style="display:none;">
        <div class="content-title">3. 数据库设计</div>
        <div class="prompt-flow">
          <div class="prompt-card"><strong>主要数据实体</strong><br><span class="prompt-desc">如用户、商品、订单等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>每个实体的字段及类型</strong><br><span class="prompt-desc">如用户名、手机号、价格等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>实体之间的关系</strong><br><span class="prompt-desc">如一对多、多对多等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>需要哪些索引或唯一约束</strong><br><span class="prompt-desc">如手机号唯一、订单号唯一等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否有历史数据迁移需求</strong><br><span class="prompt-desc">如老系统数据导入</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>数据库安全与备份要求</strong><br><span class="prompt-desc">如定期备份、权限管理等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>未来是否有扩展/分库分表需求</strong><br><span class="prompt-desc">如大数据量场景</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>其它数据库相关说明</strong><br><span class="prompt-desc">如特殊存储需求等</span></div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的数据库设计需求。</div>
      </div>
      <div id="step-content-3" class="content-section" style="display:none;">
        <div class="content-title">4. 接口设计</div>
        <div class="prompt-flow">
          <div class="prompt-card"><strong>需要实现的主要接口</strong><br><span class="prompt-desc">如登录、注册、商品列表、下单等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>每个接口的请求方式和路径</strong><br><span class="prompt-desc">如GET /api/goods/list</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>请求参数及校验规则</strong><br><span class="prompt-desc">如必填、格式、长度等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>返回数据结构及字段说明</strong><br><span class="prompt-desc">如JSON结构、字段含义</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>错误码及异常处理规范</strong><br><span class="prompt-desc">如401未登录、500服务器异常等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>接口权限与安全要求</strong><br><span class="prompt-desc">如登录校验、签名校验等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否需要API文档自动生成</strong><br><span class="prompt-desc">如Swagger、YAPI等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>其它接口相关说明</strong><br><span class="prompt-desc">如特殊接口、回调等</span></div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的接口设计需求。</div>
      </div>
      <div id="step-content-4" class="content-section" style="display:none;">
        <div class="content-title">5. 小程序页面与功能开发</div>
        <div class="prompt-flow">
          <div class="prompt-card"><strong>小程序项目所在目录</strong><br><span class="prompt-desc">如 miniapp-demo</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>需要开发的页面列表</strong><br><span class="prompt-desc">如首页、详情页、个人中心等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>每个页面的主要功能点</strong><br><span class="prompt-desc">如商品展示、下单、评论等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>页面之间的跳转和路由关系</strong><br><span class="prompt-desc">如首页跳转到详情页</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>需要哪些自定义组件</strong><br><span class="prompt-desc">如商品卡片、轮播图等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否有UI设计稿或风格参考</strong><br><span class="prompt-desc">如Figma、Sketch、竞品截图等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>动画、交互等体验要求</strong><br><span class="prompt-desc">如页面切换动画、下拉刷新等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否需要适配多端</strong><br><span class="prompt-desc">如H5/APP等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>其它页面开发相关说明</strong><br><span class="prompt-desc">如特殊页面、辅助功能等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否按要求开始开发小程序前端</strong><br><span class="prompt-desc">确认需求无误后，正式进入前端开发阶段</span></div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的页面开发需求。</div>
      </div>
      <div id="step-content-5" class="content-section" style="display:none;">
        <div class="content-title">6. 后端接口开发</div>
        <div class="prompt-flow">
          <div class="prompt-card"><strong>后端项目所在目录</strong><br><span class="prompt-desc">如 fastadmin-api</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>需要实现的业务逻辑</strong><br><span class="prompt-desc">如订单处理、支付回调等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>控制器、模型、服务的划分</strong><br><span class="prompt-desc">如MVC结构、服务层设计等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>数据校验与防护措施</strong><br><span class="prompt-desc">如参数校验、SQL注入防护等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>权限与角色管理</strong><br><span class="prompt-desc">如管理员、普通用户权限等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>日志与监控需求</strong><br><span class="prompt-desc">如操作日志、异常监控等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>性能优化与缓存策略</strong><br><span class="prompt-desc">如Redis缓存、接口限流等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>单元测试/接口测试需求</strong><br><span class="prompt-desc">如自动化测试、接口Mock等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>其它后端开发相关说明</strong><br><span class="prompt-desc">如特殊业务、第三方对接等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>是否按要求开始开发后端</strong><br><span class="prompt-desc">确认需求无误后，正式进入后端开发阶段</span></div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的后端开发需求。</div>
      </div>
      <div id="step-content-6" class="content-section" style="display:none;">
        <div class="content-title">7. 联调与测试</div>
        <div class="prompt-flow">
          <div class="prompt-card"><strong>前后端联调的主要流程</strong><br><span class="prompt-desc">如接口联调、数据对接等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>常见接口联调问题及解决办法</strong><br><span class="prompt-desc">如跨域、数据格式不符等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>功能测试用例设计</strong><br><span class="prompt-desc">如覆盖主要业务流程</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>性能测试与压力测试需求</strong><br><span class="prompt-desc">如高并发、接口响应时间等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>Bug反馈与跟踪机制</strong><br><span class="prompt-desc">如测试用例、缺陷管理工具等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>用户体验测试要求</strong><br><span class="prompt-desc">如可用性测试、用户反馈收集等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>上线前的回归测试清单</strong><br><span class="prompt-desc">如全量回归、主流程验证等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>其它测试相关说明</strong><br><span class="prompt-desc">如特殊测试场景等</span></div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的测试与联调需求。</div>
      </div>
      <div id="step-content-7" class="content-section" style="display:none;">
        <div class="content-title">8. 上线与维护</div>
        <div class="prompt-flow">
          <div class="prompt-card"><strong>上线目标平台</strong><br><span class="prompt-desc">如微信/企业微信/小程序分包等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>域名、SSL证书、备案等准备情况</strong><br><span class="prompt-desc">如已备案、SSL证书到期时间等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>服务器部署与运维方案</strong><br><span class="prompt-desc">如云服务器、负载均衡等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>数据备份与恢复策略</strong><br><span class="prompt-desc">如定期备份、异地容灾等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>监控与报警机制</strong><br><span class="prompt-desc">如服务器监控、接口报警等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>版本迭代与灰度发布需求</strong><br><span class="prompt-desc">如灰度发布、A/B测试等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>用户反馈与客服支持方式</strong><br><span class="prompt-desc">如在线客服、工单系统等</span></div>
          <div class="arrow-right"><svg class="arrow-svg" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="19" x2="32" y2="19" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round"/><polyline points="24,11 32,19 24,27" fill="none" stroke="#2d8cf0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <div class="prompt-card"><strong>后续维护与升级计划</strong><br><span class="prompt-desc">如定期更新、功能扩展等</span></div>
        </div>
        <div style="margin-top:32px;color:#888;">你可以直接复制以上提示词，逐条补充你的上线与维护需求。</div>
      </div>
    </div>
  </div>
  <script>
    function showStep(idx) {
      for (let i = 0; i < 8; i++) {
        document.getElementById('step-content-' + i).style.display = (i === idx) ? '' : 'none';
        document.getElementsByClassName('nav-step')[i].classList.toggle('active', i === idx);
      }
    }
  </script>
</body>
</html> 